<template>
  <div class="home-contianer">
    <div class="topBox">
      <div id="EchartBox1" class="EchartBox">
        <div class="numBox">
          <span class="title">今日销售</span>
          <p>
            <span class="money">￥</span>
            <b>{{ todayTotalPrices }}</b>
          </p>
        </div>
        <div class="numBox">
          <span class="title">今日采购</span>
          <p>
            <span class="money">￥</span>
            <b>{{ purchase_todayTotalPrices }}</b>
          </p>
        </div>
        <div class="numBox">
          <span class="title">昨日销售</span>
          <p>
            <span class="money">￥</span>
            <b>{{ yesterdayTotalPrices }}</b>
          </p>
        </div>
        <div class="numBox">
          <span class="title">审核中采购</span>
          <p>
            <span class="money">￥</span>
            <b>{{ purchase_notTotalPrices }}</b>
          </p>
        </div>
      </div>
      <div id="EchartBox2" class="EchartBox">
        <div class="numBox">
          <span class="title">本月累计销售</span>
          <p>
            <span class="money">￥</span>
            <b>{{ monthTotalPrices }}</b>
          </p>
        </div>
        <div class="numBox">
          <span class="title">本月累计采购</span>
          <p>
            <span class="money">￥</span>
            <b>{{ purchase_monthTotalPrices }}</b>
          </p>
        </div>
        <div class="numBox">
          <span class="title">今年累计销售</span>
          <p>
            <span class="money">￥</span>
            <b>{{ yearTotalPrices }}</b>
          </p>
        </div>
        <div class="numBox">
          <span class="title">今年累计采购</span>
          <p>
            <span class="money">￥</span>
            <b>{{ purchase_yearTotalPrices }}</b>
          </p>
        </div>
      </div>
      <div id="EchartBox3" class="EchartBox">
        <!-- <div class="numBox">1</div>
        <div class="numBox">2</div>
        <div class="numBox">3</div>
        <div class="numBox">4</div> -->
      </div>
    </div>
    <div class="centerBox">
      <div id="EchartBox4" class="EchartBox">1</div>
      <div id="EchartBox5" class="EchartBox">2</div>
      <div id="EchartBox6" class="EchartBox">3</div>
    </div>
    <div class="bottomBox">
      <p>山东千河环境科技有限公司</p>
    </div>
  </div>
</template>
<script >
import * as echarts from "echarts";
import { chart1, chart2, chart3, chart4 } from "./home/home-chart-options";
import { ref, onMounted, onUnmounted } from "vue";
import http from "../api/http";
import store from "../store";

var $chart2;
export default {
  components: {},
  data() {
    return {};
  },
  setup() {
    // let open = (item) => {
    //   window.open(item.url, "_blank");
    // };

    // http.post("api/q_produce_notarize/", {}, "").then((res) => {
    //     try {

    //     } catch (error) {
    //       console.log("错误", error);
    //     }
    //   });
    //销售
    let todayTotalPrices = ref(0),
      yesterdayTotalPrices = ref(0),
      monthTotalPrices = ref(0),
      yearTotalPrices = ref(0),
      purchase_todayTotalPrices = ref(0),
      purchase_notTotalPrices = ref(0),
      purchase_monthTotalPrices = ref(0),
      purchase_yearTotalPrices = ref(0);

    function GetSalesData() {
      http.get("api/q_sales/GetSalesData", {}, "").then((reslut) => {
        console.log("reslut", reslut);
        todayTotalPrices.value = reslut.todayTotalPrices;
        yesterdayTotalPrices.value = reslut.yesterdayTotalPrices;
        monthTotalPrices.value = reslut.monthTotalPrices;
        yearTotalPrices.value = reslut.yearTotalPrices;
      });
    }
    function GetPurchasePaymentData() {
      http
        .get("api/q_purchase_payment/GetPurchasePaymentData", {}, "")
        .then((reslut) => {
          console.log("reslut", reslut);
          purchase_todayTotalPrices.value = reslut.todayTotalPrices;
          purchase_notTotalPrices.value = reslut.notTotalPrices;
          purchase_monthTotalPrices.value = reslut.monthTotalPrices;
          purchase_yearTotalPrices.value = reslut.yearTotalPrices;
        });
    }
    GetSalesData();
    GetPurchasePaymentData();
    let timeInterval = setInterval(() => {
      GetSalesData();
      GetPurchasePaymentData();
    }, 3600000);
    onMounted(() => {
      // #region
      //盒子1
      $chart = echarts.init(document.getElementById("EchartBox4"));
      let option1 = {
        title: {
          text: "采购单",
          subtext: "付款状态",
          left: "center",
          top: 10,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: [20, 140],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5,
            },
            data: [
              { value: 20, name: "已付款" },
              { value: 18, name: "未付款" },
              { value: 16, name: "付款中" },
            ],
          },
        ],
      };
      $chart.setOption(option1);
      //#ensregion
      //盒子2
      $chart2 = echarts.init(document.getElementById("EchartBox5"));
      let option2 = {
        title: {
          text: "回款单",
          left: "center",
          top: 10,
        },
        xAxis: {
          type: "category",
          data: ["未回款", "部分回款"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200],
            type: "bar",
            showBackground: true,
            barWidth: "20%",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      $chart2.setOption(option2);
      //盒子3
      $chart3 = echarts.init(document.getElementById("EchartBox6"));
      let option3 = {
        title: {
          text: "生产领用单",
          left: "center",
          top: 10,
        },
        xAxis: {
          type: "category",
          data: ["生产中", "生产审核中"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [50, 20],
            type: "bar",
            showBackground: true,
            barWidth: "20%",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      $chart3.setOption(option3);
      window.onresize = function () {
        $chart.resize();
        $chart2.resize();
        $chart3.resize();
      };
    });
    onUnmounted(() => {
      console.log("onUnmounted");
      setsetInterval.caller(timeInterval)
    });
    return {
      todayTotalPrices,
      yearTotalPrices,
      monthTotalPrices,
      yesterdayTotalPrices,
      purchase_todayTotalPrices,
      purchase_notTotalPrices,
      purchase_monthTotalPrices,
      purchase_yearTotalPrices,
    };
  },
  destroyed() {},
};
var $chart, $chart2, $chart3;
</script>
<style lang="less" scoped>
.home-contianer {
  padding: 6px;
  background: #eee;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .centerBox,
  .topBox,
  .bottomBox {
    flex: 1;
    display: flex;
    .EchartBox {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      background-color: rgb(255, 255, 255);
      border: 5px solid rgb(238, 238, 238);
      .numBox {
        width: 50%;
        padding: 5px;
        .title {
          color: #999;
        }
        .money,
        b {
          line-height: 50px;
          font-size: 30px;
        }
      }
      .numBox:nth-child(2n-1) {
        border-right: 5px solid rgb(238, 238, 238);
      }
      .numBox:nth-child(2n) {
        border-left: 5px solid rgb(238, 238, 238);
      }
      .numBox:nth-child(1),
      .numBox:nth-child(2) {
        border-bottom: 5px solid rgb(238, 238, 238);
      }
      .numBox:nth-child(3),
      .numBox:nth-child(4) {
        border-top: 5px solid rgb(238, 238, 238);
      }
    }
  }
  .topBox {
    flex: 2;
  }
  .centerBox {
    flex: 5;
  }
  .bottomBox {
    background-color: #ffffff;
    p {
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
      color: #999;
      line-height: 30px;
    }
  }
}
</style>
